<template>
  <div class="schoolExhibitionDetails">
    <!--  导航开始 -->
    <commonHeader
      :title="title"
      @goBack="goBack()">
    </commonHeader>
    <!--    内容-->
    <div class="content">
      <!--      背景图-->
      <div class="topBgPic">
        <!--        图片-->
        <img src="http://job.dayinyun.com/oldUniversityBanner.png" alt="">
      </div>
      <!--      tab切换-->
      <div class="tabs flex-space-around">
        <div class="tab" v-for="(item,index) in tabsList" :key="index" @click="changeTab(index)">
          <img :src="tabIndex==index?item.choosedPic:item.pic" alt="">
          <div class="tabItmes" :class="{'tabActivity':tabIndex==index}">
            {{item.title}}
          </div>
        </div>
      </div>
      <!--      内容切换-->
      <div class="tabsContent">
        <!--        介绍-->
        <div v-show="tabIndex*1==0">
          <div class="introduce">
            <h1>{{introduceTitle}}</h1>
            <div class="introduceContent" v-html="introduceDescribe"></div>
          </div>
        </div>
        <!--        报名  选择分校-->
        <div v-show="tabIndex*1==1">
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import commonHeader from "../../components/common/commonHeader.vue"
  import {setStore,getStore} from "../../commonUtil/mUtils";
  import {GETBRANCHSCHOOLDETAILS} from "../../apis/oldUniversity";
  export default {
    name:"home",
    components:{
      commonHeader,
    },
    data() {
      return {
        title:"国开老年大学",
        tabsList:[
          {
            title:"介绍",
            pic:"http://job.dayinyun.com/tabIcon1.png",
            choosedPic:"http://job.dayinyun.com/tabIcon1-1.png",
          },
          {
            title:"报名",
            pic:"http://job.dayinyun.com/tabIcon2.png",
            choosedPic:"http://job.dayinyun.com/tabIcon2-1.png",
          }
        ],
        tabIndex:0,//tab默认下标
        introduceTitle:"",//学校介绍标题
        introduceDescribe:"",//学校介绍内容
        school_id:"",//学校id
      }
    },
    mounted() {
      this.loading()
      // 把路径里面的token 存起来
      let token = this.$route.query.token?this.$route.query.token:''
      if(getStore('token')!='undefined'){
        setStore('token',token);
      }
      this.title = this.$route.query.title&&this.$route.query.title!='undefined'?this.$route.query.title:"国开老年大学"
      this.school_id = this.$route.query.id?this.$route.query.id:"";//学校id
      this.getSchoolDetails();//获取学校详情
    },
    methods:{
      // 返回
      goBack(){
       this.$router.push({name:"schoolExhibition"});
      },
      // 切换tab
      changeTab(index){
        this.tabIndex = index
        if(index*1==1){
          this.setsesStore("fullPath", this.$route.fullPath);
          this.$router.push({
            name:"signUp",
            query:{
              title:this.title,
              id:this.school_id,
            }
          })
        }
      },
      // 获取学校介绍
      getSchoolDetails(){
        let getSchoolDetails = GETBRANCHSCHOOLDETAILS
        let params = {
          school_id:this.school_id,//学校id
        }
        getSchoolDetails(params).then( res => {
          if(res.data.code*1===200){
            this.introduceTitle = res.data.data.school_name
            this.introduceDescribe = res.data.data.desc
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error => {
          console.log(error)
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../assets/less/common);
  .schoolExhibitionDetails{
    width:100%;
    padding:1.38rem 0rem 0.3rem 0rem;
    box-sizing: border-box;
    .content{
      width:100%;
      .topBgPic{
        width:100%;
        padding:0 0.3rem;
        box-sizing: border-box;
        img{
          width:100%;
          height: auto;
        }
      }
      /*tab*/
      .tabs{
        width:100%;
        padding:0.24rem 0.65rem;
        box-sizing: border-box;
        .tab{
          display: flex;
          flex-direction: column;
          justify-content: center;
          img{
            width:auto;
            height: 0.56rem;
            margin-bottom: 0.1rem;
          }
          .tabItmes{
            font-size:@fontSize28;
            font-weight: @fontWeight500;
            font-family:@fontFamily400;
            color:@whiteColor;
          }
          .tabActivity{
            color:#FEA300;
          }
        }
      }
      .tabsContent{
        .introduce{
          width:100%;
          padding:0.2rem 0.3rem 0.5rem 0.3rem;
          box-sizing: border-box;
          h1{
            font-size:@fontSize44;
            font-family:PingFang-SC-Heavy;
            font-weight: @fontWeight500;
            line-height:0.6rem;
            color:@whiteColor;
            margin-bottom: 0.4rem;
          }
          .introduceContent{
            width:100%;
            /deep/p{
              display: inline-block;
              width:100%;
              height:auto;
              font-size:@fontSize30;
              font-family:@fontFamily400;
              font-weight: @fontWeight400;
              line-height:0.46rem;
              color:@whiteColor;
              letter-spacing: 0.01rem;
              text-align: justify;
              img{
                width:100%;
                height:auto;
                margin:0.3rem 0;
                display: inline-block;
              }
            }
          }

        }
      }
    }
  }
</style>
